<template>
  <view class="background-main">
    <eui-card-input
        v-model="currentTag"
        :range="radioList"
        title="样式示例"
        type="radio"
        alignType="left"
        show-bottom-line="true"
        @buttonClick="buttonClick"
    />
    <view style="margin: 50rpx"></view>

    <view v-if="currentTag === '2'">
      <!--登录界面-->
      <eui-background type="login">
      </eui-background>
    </view>

    <view v-else-if="currentTag === '3'">
      <!--白底背景布局-->
      <eui-background type="white" distanceToBottom="200" showBottom="false">
        <!--这是页面顶部插槽的内容-->
        <template v-slot:top>

        </template>
        <!--这是页面主体插槽的内容-->
        <template v-slot:main>

        </template>
        <!--这是页面底部插槽的内容-->
        <template v-slot:bottom>

        </template>
      </eui-background>
    </view>

    <view v-else-if="currentTag === '4'">
      <!--常规布局-->
      <eui-background type="common">
        <view class="top-title">
          <text>设置客户代码</text>
        </view>
        <view class="search-view">
          <eui-card-input
              v-model="client"
              title="客户代码"
              placeholder="请输入客户代码"
              autoStyle="borderRadius: 20rpx"
              type="text"
              rightIconType="clear"
              alignType="left"
              @iconClick="clear"
          />
        </view>
      </eui-background>
    </view>

    <view v-else-if="currentTag === '5'">
      <!--首页-->
      <eui-background type="home">
        <!--这是页面顶部插槽的内容-->
        <template v-slot:top>

        </template>
        <!--这是页面底部插槽的内容-->
        <template v-slot:bottom>

        </template>
      </eui-background>
    </view>

    <view v-else-if="currentTag === '6'">
      <!--个人-->
      <eui-background type="person" :imageUrl="personImg">
        <!--这是页面顶部插槽的内容-->
        <template v-slot:top>
          <view class="m-person-top">
            <img class="m-person-img" :src="personImg" alt="Local Image">
            <view class="m-person-view">
              <text>贝莉</text>
              <text class="m-person-num">13266641234</text>
            </view>
          </view>
        </template>
        <!--这是页面底部插槽的内容-->
        <template v-slot:bottom>

        </template>
      </eui-background>
    </view>

    <view v-else-if="currentTag === '7'">
      <!--全背景-->
      <eui-background type="full">

      </eui-background>
    </view>

    <view v-else>
      <!--启动页-->
      <eui-background type="launch">
        <view class="launch-view">
          <text class="launch-title-text">员工数字化</text>
          <text>新零售低成本、高效办公新方式</text>
        </view>
      </eui-background>
    </view>
  </view>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "Background"
  }
}
</route>

<script>
export default {
  name: "index",
  data() {
    return {
      // 背景类型
      currentTag: '1',
      // 背景列表
      radioList: [
        {text: '启动页', value: '1'},
        {text: '登录界面', value: '2'},
        {text: '白底背景布局', value: '3'},
        {text: '常规布局', value: '4'},
        {text: '首页', value: '5'},
        {text: '个人', value: '6'},
        {text: '全背景', value: '7'},
      ],
      // 客户代码
      client: '',
      // 个人界面头像
      personImg: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/7b03d428fe1d450aad556ef6e149d744_mergeImage.png',
    }
  },
  methods: {
    clear() {
      this.client = '';
    },
    buttonClick(e) {
      let { modelValue, singleTag } = e;
      this.currentTag = modelValue;
    }
  }
}
</script>

<style scoped>
.background-main {
  width: 100%;
  height: 1624rpx;
  display: flex;
  flex-direction: column;
  background: #F2F2F2;
}
.top-title {
  width: 100%;
  height: 88rpx;
  margin-top: 88rpx;
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 36rpx;
  color: #FFFFFF;
  line-height: 50rpx;
  text-align: right;
  font-style: normal;
}
.search-view {
  width: 100%;
  height: 100rpx;
  display: flex;
  margin-top: 6rpx;
  padding: 12rpx 20rpx 0 20rpx;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}
.launch-view {
  display: flex;
  flex-direction: column;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #888888;
  line-height: 42rpx;
  text-align: left;
  font-style: normal;
  margin-left: 65rpx;
}
.launch-title-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 52rpx;
  color: #333333;
  line-height: 73rpx;
  text-align: left;
  font-style: normal;
  margin-bottom: 16rpx;
}
.m-person-top {
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: flex-start;
  align-items: center;
  padding-left: 28rpx;
  flex-direction: row;
}
.m-person-view {
  display: flex;
  flex-direction: column;
  margin-left: 32rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 48rpx;
  color: #FFFFFF;
  line-height: 67rpx;
  text-align: justify;
  font-style: normal;
  text-transform: none;
}
.m-person-num {
  font-size: 28rpx;
  color: #FFFFFF;
  line-height: 40rpx;
}
.m-person-img {
  width: 144rpx;
  height: 144rpx;
}
</style>
